<template>
  <div class="img" :class="{ [align]: true }">
    <el-image
      v-for="(item, index) of list"
      :key="index"
      class="image"
      style="width: 100px; height: 100px"
      :src="`${api}${item}`"
      @click="click(`${api}${item}`)"
      :preview-src-list="srcList"
    >
      <div slot="error">
        <i class="el-icon-picture-outline"></i></div
    ></el-image>
  </div>
</template>
<script>
export default {
  props: {
    align: {
      type: String,
      default: "center",
    },
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      api: window.g.api,
      srcList: null,
      list: [],
    };
  },
  watch: {
    value(val) {
      if (val) {
        this.list = this.value.split(",");
      }
    },
  },
  methods: {
    click(img) {
      this.srcList = [];
      this.srcList.push(img);
    },
  },
  created() {
    if (this.value) {
      this.list = this.value.split(",");
    }
  },
};
</script>
<style lang="scss" scoped>
.img {
  display: flex;
  align-items: center;
  .image {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee;
  }
}
.right {
  justify-content: flex-end;
}
.left {
  justify-content: flex-start;
}
.center {
  justify-content: center;
}
</style>
